<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="renderer" content="webkit">
    <title>登录</title>
    <script type="text/javascript" src="../javascript/jquery-1.8.2.min.js"></script>
    <style type="text/css">
        html, body, div, span, applet, object, iframe,
        blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn,
        em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var,
        b, u, i, dl, dt, dd, ol, nav ul, nav li, fieldset, form, label, legend,
        table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas,
        details, embed, figure, figcaption, footer, header, hgroup, menu, nav,
        output, ruby, section, summary, time, mark, audio, video, input {
            padding: 0;
            margin: 0;
            font-family: "microsoft yahei";
        }

        body {
            moz-user-select: -moz-none;
            -moz-user-select: none;
            -o-user-select: none;
            -khtml-user-select: none;
            -webkit-user-select: none;
            -ms-user-select: none;
            user-select: none;
            cursor: default;
            overflow-y: auto;
            overflow-x: auto;
        }

        address, caption, cite, code, dfn, em, i, strong, th, var, optgroup {
            font-style: normal;
            font-weight: normal;
        }

        html, body {
            width: 100%;
            height: 100%;
            font-size: 12px;
            overflow: auto;
        }

        input, button, select, img {
            vertical-align: middle;
        }

        body {
            font-family: "microsoft yahei";
            font-size: 100%;
            font-size: 1em;
            font-size: 12px;
            color: #333;
            line-height: 1.16667;
            float: left;
        }

        .content {
            width: 100%;
            height: 600px;
            background-image: url("../img/bg2.jpg");
            background-repeat: repeat-x;
            background-position: center;
        }
        .contentMiddle{
            width: 1190px;
            height: 600px;
            background-image: url("../img/loginBg.jpg");
            background-repeat: no-repeat;
            background-position: center;
            margin: 0 auto;
        }

        .loginView {
            width: 300px;
            height: 400px;
            background-image: url("../img/lognBg.png");
            background-repeat: repeat;
            position: fixed;
            right: 50px;
            top: 150px;;
        }

        .loginTitle {
            width: 200px;
            float: left;
            margin-left: 50px;
            height: 100px;
            background-position: center bottom;
            background-image: url("../img/loginLogo.png");
            background-repeat: no-repeat;
        }

        .loginInputView {
            width: 200px;
            float: left;
            margin-top: 20px;
            margin-left: 50px;
            height: 40px;
            background-color: white;
        }

        .loginInput {
            float: left;
            width: 160px;
            height: 40px;
            line-height: 40px;
            outline: none;
            background: none;
            border: none;
        }

        .inputPic {
            width: 40px;
            float: left;
            height: 40px;
            background-position: center;
            background-repeat: no-repeat;
        }

        .username {
            background-image: url("../img/username.png");
        }

        .password {
            background-image: url("../img/password.png");
        }

        .inputButton {
            float: left;
            width: 200px;
            margin-top: 20px;
            margin-left: 50px;
            height: 35px;
            text-align: center;
            line-height: 35px;
            color: white;
            background-color: #64a5d1;
            font-size: 16px;
        }

        .loginRadioView {
            float: left;
            width: 200px;
            margin-top: 10px;
            margin-left: 50px;
        }

        .fl {
            float: left;
        }

        .fr {
            float: right;
        }

        .register {
            float: left;
            width: 200px;
            margin-top: 20px;
            margin-left: 50px;
            text-decoration: underline;
            font-size: 13px;
            height: 30px;
            text-align: center;
            cursor: pointer;
        }

        .header {
            width: 850px;
            height: 90px;
            margin: 0 auto;

        }
        .hdLogo{
            float: left;
        }
        .hdIntro {
            float: left;
            width: 95px;
            height: 28px;
            line-height: 28px;
            font-size: 18px;
            overflow: hidden;
            margin-top: 27px;
            margin-left: 20px;
            padding-left: 15px;
            text-decoration:none;
            color: #999999;
            border-left: 1px solid gainsboro;
        }
    </style>
</head>
<body>
<div class="header">
    <h1 class="hdLogo">
        <img src="../img/lan.png">
    </h1>
    <a href="#" class="hdIntro">用户登录</a>
</div>
<div class="content">
    <div class="contentMiddle">
        <div class="loginView">
            <div class="loginTitle"></div>
            <div class="loginInputView">
                <div class="inputPic username"></div>
                <input class="loginInput" placeholder="请输入用户名/手机号码"/>
            </div>
            <div class="loginInputView">
                <div class="inputPic password"></div>
                <input class="loginInput" placeholder="请输入密码"/>
            </div>
            <div class="inputButton">登&nbsp;&nbsp;&nbsp;&nbsp;录</div>
            <div class="loginRadioView">
                <div class="fl">
                    <input type="checkbox">记住密码
                </div>
                <div class="fr">忘记密码</div>
            </div>
            <a class="register"><u>点我注册,马上开始学习</u></a>
        </div>
    </div>
</div>

<script type="text/javascript">
    var marginFix = (document.body.clientWidth - 1190) / 2;
    $(".loginView").css("right", marginFix + 50 + "px")

    function placeholderSupport() {
        return 'placeholder' in document.createElement('input');
    }

    if (!placeholderSupport()) {   // 判断浏览器是否支持 placeholder
        $('[placeholder]').focus(function () {
            var input = $(this);
            if (input.val() == input.attr('placeholder')) {
                input.val('');
                input.removeClass('placeholder');
            }
        }).blur(function () {
            var input = $(this);
            if (input.val() == '' || input.val() == input.attr('placeholder')) {
                input.addClass('placeholder');
                input.val(input.attr('placeholder'));
            }
        }).blur();
    }
    ;
</script>
</body>
</html>